<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3教程 - 完整指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            background-attachment: fixed;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 2rem 0;
            box-shadow: 0 2px 15px rgba(0,0,0,0.2);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 20px;
        }

        .intro {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-left: 5px solid #667eea;
        }

        .intro h2 {
            color: #667eea;
            margin-bottom: 1rem;
        }

        .css-category {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .css-category:hover {
            transform: translateY(-5px);
        }

        .css-category h2 {
            color: #764ba2;
            border-bottom: 3px solid #667eea;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }

        .property-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
        }

        .property-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .property-card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            transform: translateY(-3px);
        }

        .property-card h3 {
            color: #667eea;
            margin-bottom: 0.8rem;
            font-size: 1.3rem;
        }

        .property-card code {
            background: #f1f3f4;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            color: #d63384;
        }

        .example {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 4px 4px 0;
        }

        .example-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #764ba2;
        }

        .demo-area {
            margin: 1rem 0;
            padding: 1rem;
            border: 1px dashed #ccc;
            background: white;
        }

        .demo-box {
            width: 100px;
            height: 100px;
            background: #667eea;
            margin: 10px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        /* CSS3特效演示 */
        .box-shadow-demo {
            box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
        }

        .border-radius-demo {
            border-radius: 20px;
        }

        .gradient-demo {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }

        .transform-demo {
            transform: rotate(15deg) scale(1.1);
        }

        .transition-demo {
            transition: all 0.3s ease;
        }

        .transition-demo:hover {
            transform: scale(1.2) rotate(10deg);
            background: #764ba2;
        }

        .animation-demo {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .flex-demo {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #f0f0f0;
            padding: 20px;
        }

        .flex-item {
            width: 80px;
            height: 80px;
            background: #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .grid-demo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background: #f0f0f0;
            padding: 20px;
        }

        .grid-item {
            height: 60px;
            background: #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        footer {
            text-align: center;
            padding: 2rem;
            background: #333;
            color: white;
            margin-top: 2rem;
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            
            .property-grid {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .css-category h2 {
                font-size: 1.5rem;
            }
        }

        /* 目录导航 */
        .toc {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .toc h2 {
            color: #764ba2;
            margin-bottom: 1rem;
        }

        .toc ul {
            list-style-type: none;
            padding-left: 0;
        }

        .toc li {
            margin-bottom: 0.5rem;
        }

        .toc a {
            text-decoration: none;
            color: #667eea;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .toc a:hover {
            color: #764ba2;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS3教程</h1>
        <p class="subtitle">完整指南：掌握CSS3的所有特性和使用方法</p>
    </header>
    
    <div class="container">
        <section class="toc">
            <h2>目录</h2>
            <ul>
                <li><a href="#intro">CSS3简介</a></li>
                <li><a href="#selectors">选择器</a></li>
                <li><a href="#box-model">盒模型</a></li>
                <li><a href="#backgrounds">背景</a></li>
                <li><a href="#borders">边框</a></li>
                <li><a href="#text">文本效果</a></li>
                <li><a href="#transforms">2D/3D转换</a></li>
                <li><a href="#transitions">过渡</a></li>
                <li><a href="#animations">动画</a></li>
                <li><a href="#layout">布局</a></li>
                <li><a href="#responsive">响应式设计</a></li>
            </ul>
        </section>

        <section id="intro" class="intro">
            <h2>CSS3简介</h2>
            <p>CSS3是层叠样式表（Cascading Style Sheets）的最新标准，它引入了许多新特性，包括圆角、阴影、渐变、过渡、动画、弹性盒子布局等。CSS3将规范拆分为多个模块，使得开发更加灵活和模块化。</p>
        </section>
        
        <!-- 选择器 -->
        <section id="selectors" class="css-category">
            <h2>选择器</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>属性选择器</h3>
                    <p>根据元素属性选择元素</p>
                    <div class="example">
                        <div class="example-title">语法：</div>
                        <code>[attribute=value]</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>input[type="text"] { width: 150px; }</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>伪类选择器</h3>
                    <p>选择元素的特定状态</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>a:hover { color: red; }</code>
                        <code>input:focus { border: 2px solid blue; }</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>结构性伪类</h3>
                    <p>根据元素在文档树中的位置选择</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>li:nth-child(odd) { background: #f0f0f0; }</code>
                        <code>p:first-child { font-weight: bold; }</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 盒模型 -->
        <section id="box-model" class="css-category">
            <h2>盒模型</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>box-sizing</h3>
                    <p>定义盒模型的计算方式</p>
                    <div class="example">
                        <div class="example-title">值：</div>
                        <code>content-box | border-box</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>* { box-sizing: border-box; }</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box box-shadow-demo">box-sizing</div>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>box-shadow</h3>
                    <p>添加阴影效果</p>
                    <div class="example">
                        <div class="example-title">语法：</div>
                        <code>h-shadow v-shadow blur spread color inset</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>box-shadow: 5px 5px 10px rgba(0,0,0,0.3);</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box box-shadow-demo">box-shadow</div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 背景 -->
        <section id="backgrounds" class="css-category">
            <h2>背景</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>background-image</h3>
                    <p>设置背景图像</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>background-image: url('image.jpg');</code>
                        <code>background-image: linear-gradient(...);</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>linear-gradient</h3>
                    <p>创建线性渐变</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>background: linear-gradient(45deg, red, blue);</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box gradient-demo">渐变</div>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>background-size</h3>
                    <p>调整背景图像大小</p>
                    <div class="example">
                        <div class="example-title">值：</div>
                        <code>auto | cover | contain | length</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>background-size: cover;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 边框 -->
        <section id="borders" class="css-category">
            <h2>边框</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>border-radius</h3>
                    <p>创建圆角边框</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>border-radius: 10px;</code>
                        <code>border-radius: 50%; /* 圆形 */</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box border-radius-demo">圆角</div>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>border-image</h3>
                    <p>使用图像作为边框</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>border-image: url('border.png') 30 round;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 文本效果 -->
        <section id="text" class="css-category">
            <h2>文本效果</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>text-shadow</h3>
                    <p>添加文本阴影</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>text-shadow: 2px 2px 4px rgba(0,0,0,0.5);</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>word-wrap</h3>
                    <p>控制长单词换行</p>
                    <div class="example">
                        <div class="example-title">值：</div>
                        <code>normal | break-word</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>word-wrap: break-word;</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>@font-face</h3>
                    <p>自定义字体</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>@font-face { font-family: 'MyFont'; src: url('font.woff2'); }</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 2D/3D转换 -->
        <section id="transforms" class="css-category">
            <h2>2D/3D转换</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>transform</h3>
                    <p>应用2D或3D转换</p>
                    <div class="example">
                        <div class="example-title">函数：</div>
                        <code>translate() rotate() scale() skew()</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>transform: rotate(45deg);</code>
                        <code>transform: scale(1.2);</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box transform-demo">转换</div>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>transform-origin</h3>
                    <p>设置转换的基点</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>transform-origin: center;</code>
                        <code>transform-origin: 0 0;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 过渡 -->
        <section id="transitions" class="css-category">
            <h2>过渡</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>transition</h3>
                    <p>添加过渡效果</p>
                    <div class="example">
                        <div class="example-title">属性：</div>
                        <code>property duration timing-function delay</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>transition: all 0.3s ease;</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box transition-demo">悬停我</div>
                        <p style="text-align: center; margin-top: 10px;">将鼠标悬停在上方方块上查看过渡效果</p>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>transition-timing-function</h3>
                    <p>设置过渡速度曲线</p>
                    <div class="example">
                        <div class="example-title">值：</div>
                        <code>ease | linear | ease-in | ease-out | cubic-bezier()</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>transition-timing-function: ease-in-out;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 动画 -->
        <section id="animations" class="css-category">
            <h2>动画</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>@keyframes</h3>
                    <p>定义动画关键帧</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>@keyframes slide { from {left: 0;} to {left: 100px;} }</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>animation</h3>
                    <p>应用动画</p>
                    <div class="example">
                        <div class="example-title">属性：</div>
                        <code>name duration timing-function delay iteration-count</code>
                    </div>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>animation: slide 2s infinite;</code>
                    </div>
                    <div class="demo-area">
                        <div class="demo-box animation-demo">动画</div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 布局 -->
        <section id="layout" class="css-category">
            <h2>布局</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>Flexbox</h3>
                    <p>弹性盒子布局</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>display: flex;</code>
                        <code>justify-content: center;</code>
                        <code>align-items: center;</code>
                    </div>
                    <div class="demo-area">
                        <div class="flex-demo">
                            <div class="flex-item">1</div>
                            <div class="flex-item">2</div>
                            <div class="flex-item">3</div>
                        </div>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>Grid</h3>
                    <p>网格布局</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>display: grid;</code>
                        <code>grid-template-columns: 1fr 1fr 1fr;</code>
                    </div>
                    <div class="demo-area">
                        <div class="grid-demo">
                            <div class="grid-item">1</div>
                            <div class="grid-item">2</div>
                            <div class="grid-item">3</div>
                            <div class="grid-item">4</div>
                            <div class="grid-item">5</div>
                            <div class="grid-item">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 响应式设计 -->
        <section id="responsive" class="css-category">
            <h2>响应式设计</h2>
            <div class="property-grid">
                <div class="property-card">
                    <h3>媒体查询</h3>
                    <p>针对不同设备应用不同样式</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>@media screen and (max-width: 768px) { ... }</code>
                    </div>
                </div>
                
                <div class="property-card">
                    <h3>viewport</h3>
                    <p>控制视口</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <footer>
        <p>&copy; 2023 CSS3教程 - 完整指南</p>
    </footer>
</body>
</html>
